<template>
  <div class="full-container">
    <div class="edit-container">
      <div class="edit-button">
        <a class="button is-info" @click="isNewMailCardActive = true">新增发件箱</a>
      </div>
      <div class="customer-table">
        <b-table
            :data="sendMailBoxList"
            class="customer-table"
            :striped="true"
            :narrowed="true"
            :paginated="true"
            :per-page="15">
            <template slot-scope="props">
              <b-table-column field="id" label="序号" width="50" numeric>
                {{ props.row.id }}
              </b-table-column>
              <b-table-column field="email" label="邮箱" email>
                {{ props.row.email }}
              </b-table-column>
              <b-table-column field="createdAt" label="创建时间">
                {{props.row.createdAt}}
              </b-table-column>
              <b-table-column label="删除">
                <a class="button is-danger" @click="deleteSendMailBox(props.row.id)">删除</a>
              </b-table-column>
            </template>
          </b-table>
      </div>
    </div>
    <!-- 新增发件箱模态框 -->
    <b-modal :active.sync="isNewMailCardActive" :width="640" scroll="keep">
        <div class="card">
            <div class="card-content">
              <b-field label="邮箱">
                  <b-input v-model="email" type="email"></b-input>
              </b-field>
              <b-field label="邮箱密码">
                  <b-input v-model="password" type="password"></b-input>
              </b-field>
              <b-field label="选择邮箱类型">
                  <b-select v-model="sendBoxType" expanded>
                    <option value="0">qq邮箱</option>
                    <option value="1">腾讯企业邮</option>
                  </b-select>
              </b-field>
              <div class="card-button">
                <a class="button is-info" @click="createNewMailBox">新建发件箱</a>
              </div>
            </div>
        </div>
    </b-modal>
    <!-- loading状态 -->
     <b-loading :is-full-page="isFullPage" :active.sync="isLoading" :can-cancel="false"></b-loading>
  </div>

</template>

<script>
import { getUserId } from "@/util/userInfoStorage"
import { getAllUserMailBox, createUserMailBox, deleteUserMailBox } from "@/api/mail.js"
export default {
  name: "customer-list",
  data() {
    return {
      sendMailBoxList: [],
      blackCustomerList: [],
      radio: 1,
      isNewMailCardActive: false,
      userid: 0,
      email: '',
      password: '',
      sendBoxType: -1,
      isLoading: false,
      isFullPage: true,
    }
  },
  methods: {
    //新建发件箱
    createNewMailBox(){
      let email = this.email;
      let password = this.password;
      let sendBoxType = this.sendBoxType;
      if(email && password && (sendBoxType != '-1')){
        this.isLoading = true;
        createUserMailBox(this.userid,email,password,sendBoxType).then((res) => {
          this.$toast.open({
            message: '新建发件箱成功',
            type: 'is-success'
          })
          this.isNewMailCardActive = false;
          this.getSendBoxList();
          this.isLoading = false;
        }).catch(e => {
          this.isLoading = false;
          this.$toast.open({
            message: e.message || '服务器未知错误',
            type: 'is-danger'
          })
        });
      }else {
        this.$toast.open({
          message: '请填写完整信息',
          type: 'is-danger'
        })
      }
    },
    //删除发件箱
    async deleteSendMailBox(mailBoxId) {
      this.$dialog.confirm({
          title: '删除发件箱',
          message: '确定要 <b>删除</b> 此邮箱? 数据删除后不可回复',
          confirmText: '确定删除',
          cancelText: '取消',
          type: 'is-danger',
          hasIcon: false,
          onConfirm: () => {
            this.isLoading = true;
            deleteUserMailBox(this.userid,mailBoxId).then((res) => {
              this.$toast.open({
                message: '删除成功',
                type: 'is-success'
              })
              this.getSendBoxList();
              this.isLoading = false;
            }).catch(e => {
              this.isLoading = false;
              this.$toast.open({
                message: e.message || '服务器未知错误',
                type: 'is-danger'
              })
            })
          }
      })
    },
    //获取发件箱列表
    getSendBoxList() {
        this.isLoading = true;
        getAllUserMailBox(this.userid).then((res) => {
            this.sendMailBoxList = res.data;
            this.isLoading = false;
        }).catch(e => {
            this.isLoading = false;
            this.$toast.open({
              message: e.message || '未知错误',
              type: 'is-danger'
            })
        });
    },
    handleClick(row) {
      console.log(row);
    }
  },
  mounted(){
    let userid = getUserId();
    this.userid = userid;
    this.getSendBoxList();
  }
}
</script>

<style lang="less" scoped>
.edit-container {
  margin: 20px 20px;
  padding: 40px 40px;
  height: 80vh;
  background-color: #ffffff;
  .settings {
    display: flex;
    justify-content: space-between;
    .left-setting {
      display: flex;
      .form-item {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
    .right-setting {
      display: flex;
      .button {
        margin-right: 10px;
      }
    }
  }
}
.card-button {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
.edit-button {
  margin-bottom: 30px;
}
</style>
